<template>
  <div>
    <div class="select-top">
      <span class="breadCrumb">
        <a-icon type="home" class="icon" /> /
        <span class="last">基础设置</span> /
        <span class="now">扫码统计</span>
      </span>
      <div class="selectBg">区域选择</div>
      <j-select-depart placeholder="请选择" style="width: 430px;margin-top: -1px" v-model="areaId" @change="areaChange" />
    </div>

    <a-card :bordered="false">
      <a-row :gutter="[17, 0]" class="topContent">
        <a-col :span="4" v-for="item in propList" :key="item.prop">
          <div class="ter_card">
            <img :src="require(`@/assets/qrStatistic/${item.icon}.png`)" class="runingIcon" />
            <div class="title">
              {{item.label}}
              <div class="value">{{formData[item.prop]}}</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>

    <a-row :gutter="[8, 0]" class="topContent" style="margin-top: 8px;">
      <a-col :span="13">
        <a-card :bordered="false">
          <div class="title">
            各地区村庄扫码反馈总量
          </div>
          <div id="mapContent" class="mapContent"></div>
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card :bordered="false" class="rankTable">
          <div class="title">
            扫码反馈类型排行
          </div>
          <div v-if="terminalList.length">
            <div style="margin-top: 8px" class="radioClass">
              <a-radio-group size="small" :default-value="terminalIdCheck" button-style="solid" @change="radioChange">
                <a-radio-button v-for="item in terminalList" :key="item.terminalId" :value="item.terminalId">
                  {{item.terminalName}}
                </a-radio-button>
              </a-radio-group>
            </div>
            <a-table :columns="columns" :pagination="false" :bordered="false" :data-source="tableData"
              style="margin-top: 18px">
              <template slot="sort" slot-scope="text, record, index">
                <img :src="rankIconList[index]">
              </template>
            </a-table>
          </div>
          <a-empty v-else />
        </a-card>
        <a-card :bordered="false" style="margin-top: 8px;height: 372px">
          <div class="title">
            扫码反馈趋势
          </div>
          <div style="display: flex;justify-content: end" class="radioClass">
            <a-radio-group size="small" default-value="a" button-style="solid" @change="dateTypeChange">
              <a-radio-button value="a">
                今日
              </a-radio-button>
              <a-radio-button value="b">
                本周
              </a-radio-button>
              <a-radio-button value="c">
                本月
              </a-radio-button>
            </a-radio-group>
            <a-range-picker size="small" @change="dateTypeChange" style="width: 262px;height: 28px;margin-left: 8px" />
          </div>
          <div ref="feedTendChart" class="feedTendChart"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-card :bordered="false" style="margin-top: 8px;">
      <div style="display: flex;justify-content: space-between;margin-bottom: 28px;">

        <a-form :labelCol="{sm:{span: 8},md:{span: 8}}" :wrapperCol="{sm:{span: 16 },md:{span: 16}}" layout="inline"
          @keyup.enter.native="searchQuery">
          <a-row>
            <a-col :md="4" :sm="12">
              <a-form-item label="区域">
                <j-select-depart placeholder="请选择" v-model="queryParam.areaId" style="width: 120px" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="12">
              <a-form-item label="反馈类型">
                <a-select v-model="queryParam.type" placeholder="请选择" style="width: 120px">
                  <a-select-option v-for="feedType in feedTypeList" :key="feedType.itemValue"
                    :value="feedType.itemValue">
                    {{feedType.itemText}}
                  </a-select-option>
                </a-select>

                <!-- <a-input placeholder="反馈类型" v-model="queryParam.type"></a-input> -->
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="提交时间">
                <a-range-picker v-model="queryParam.dateRange" @change="dateQueryChange" />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="12">
              <a-form-item label="状态">
                <!-- <a-input placeholder="状态" v-model="queryParam.status"></a-input> -->
                <a-select v-model="queryParam.status" style="width: 120px" placeholder="请选择">
                  <a-select-option value="0">
                    未处理
                  </a-select-option>
                  <a-select-option value="1">
                    已处理
                  </a-select-option>
                  <a-select-option value="2">
                    超时未处理
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="12">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button type="primary" @click="customerSearchReset" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <a-button type="primary" @click="checkFeedDetail(selectedFeed)">导出</a-button>
      </div>
      <a-table :columns="columns1" :bordered="false" :pagination="ipagination" :data-source="tableData1"
        :row-selection="rowSelection" @change="pageChange">
        <template slot="picUrl" slot-scope="text, record, index">
          {{text ? '查看图片':''}}
        </template>
        <template slot="status" slot-scope="text, record, index">
          <div class="statusTag" :class="{'process': text === 0, 'processed': text === 1, 'overtime': text === 2}">
            {{['未处理','已处理','超时未处理'][text]}}
          </div>
        </template>
        <template slot="handlePictureUrl" slot-scope="text, record, index">
          {{text ? '查看图片':''}}
        </template>

        <template slot="operate" slot-scope="text, record, index">
          <a-button type="link" style="color: #2769F7;font-weight: 800"
            @click="checkFeedDetail([record.id])">查看</a-button>
          <a-button type="link" style="color: #FF0200;font-weight: 800" @click="deleteFeed(record.id)">删除</a-button>
        </template>
      </a-table>
    </a-card>

    <feed-detail-export-dialog ref="feedDetailExport"></feed-detail-export-dialog>
  </div>
</template>

<script>
import { getDictItemList } from '@/api/system'
import * as echarts from 'echarts'
import { deleteFeed, getStatisticData, getAreaTerList, getStatisticTerFeedRank, exportFeedList, getVillagePoint, getStatisticTerFeedTend, getStatisticTerFeedList } from '@/api/statisticQr'
import AMapLoader from '@amap/amap-jsapi-loader'
import { wgs84togcj02 } from '@/utils/coordtransform'
import moment from 'dayjs'
import { mapGetters } from 'vuex'
import { getTimeWeekMouth } from '@/utils/time_tool'
import { getNodePath } from '@/utils/treeOperate'
import FeedDetailExportDialog from './modules/StatisticQr/FeedDetailExportDialog.vue'

export default {
  components: { FeedDetailExportDialog },
  data() {
    return {
      terminalIdCheck: '',
      areaId: '',
      queryParam: {
        areaId: '',
        startDate: '',
        endDate: '',
        type: null,
        status: null,
        pageNo: 1,
        pageSize: 10
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          console.log(total, range, '计算计算计算分页')
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },

      },
      terminalList: [],
      propList: [
        { label: '累计扫码反馈总量', prop: 'total', icon: 'total' },
        { label: '今日反馈量(次)', prop: 'today', icon: 'today' },
        { label: '近7日反馈量(次)', prop: 'last7Days', icon: 'last7Days' },
        { label: '近30日反馈量(次)', prop: 'last30Days', icon: 'last30Days' },
        { label: '反馈频率(次)', prop: 'frequency', icon: 'frequency' },
        { label: '扫码反馈占比', prop: 'proportion', icon: 'proportion' },
      ],
      formData: {},
      rankIconList: [require('../../assets/statistic/one.png'), require('../../assets/statistic/two.png'), require('../../assets/statistic/three.png'), require('../../assets/statistic/four.png')],
      columns: [
        {
          title: '排名',
          dataIndex: 'sort',
          key: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' }
        },
        {
          title: '反馈类型',
          dataIndex: 'type',
          key: 'type',
          align: 'center'
        },
        {
          title: '占比',
          dataIndex: 'proportion',
          key: 'proportion',
          align: 'center'
        },
      ],
      tableData: [
        {
          deviceName: '设备损坏',
          alarmCount: '35',
          sort: 1
        },
        {
          deviceName: '设备损坏',
          alarmCount: '35',
          sort: 2
        },
        {
          deviceName: '设备损坏',
          alarmCount: '35',
          sort: 3
        },
        {
          deviceName: '设备损坏',
          alarmCount: '35',
          sort: 4
        },
      ],
      columns1: [
        {
          title: '工单编号',
          dataIndex: 'id',
          key: 'id',
          align: 'center',
          // scopedSlots: { customRender: 'id' }
        },
        {
          title: '反馈人',
          dataIndex: 'submitPerson',
          key: 'submitPerson',
          align: 'center'
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          key: 'phone',
          align: 'center'
        },
        {
          title: '提交时间',
          dataIndex: 'submitTime',
          key: 'submitTime',
          align: 'center'
        },
        {
          title: '村庄名称',
          dataIndex: 'villageName',
          key: 'villageName',
          align: 'center'
        },
        {
          title: '终端名称',
          dataIndex: 'terminalName',
          key: 'terminalName',
          align: 'center'
        },
        {
          title: '位置',
          dataIndex: 'position',
          key: 'position',
          align: 'center'
        },
        {
          title: '反馈类型',
          dataIndex: 'typeDictText',
          key: 'typeDictText',
          align: 'center'
        },
        {
          title: '问题描述',
          dataIndex: 'description',
          key: 'description',
          align: 'center'
        },
        {
          title: '问题图片',
          dataIndex: 'picUrl',
          key: 'picUrl',
          align: 'center',
          scopedSlots: { customRender: 'picUrl' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }

        },
        {
          title: '处理措施',
          dataIndex: 'handleDtl',
          key: 'handleDtl',
          align: 'center'
        },
        {
          title: '处理图片',
          dataIndex: 'handlePictureUrl',
          key: 'handlePictureUrl',
          align: 'center',
          scopedSlots: { customRender: 'handlePictureUrl' }
        },
        {
          title: '运维人员',
          dataIndex: 'operatorName',
          key: 'operatorName',
          align: 'center'
        },
        {
          title: '运维时间',
          dataIndex: 'handleDate',
          key: 'handleDate',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        },
      ],
      tableData1: [
        // {status: 1,id: '11121' },
        // {status: 0,id: '22121' },
        // {status: 2,id: '32121'},
      ],
      option: {
        tooltip: {
          show: true,
          axisPointer: {
            show: true,

          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '反馈总数',
            data: [],
            type: 'line'
          }
        ]
      },
      feedTypeList: [],
      selectedFeed: [],
      centerPosition: [120.04038915928201, 29.27080844822686]
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedFeed = selectedRows.map(item => item.id)
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            name: record.name,
            id: record.id
          },
        }),
      };
    },
  },
  mounted() {
    this.areaId = this.queryParam.areaId = this.userInfo.departIds
    this.getDictListFun()
    this.getStatisticData()
    this.getAreaTerList()
    this.dateTypeChange({ target: { value: 'a' } })
    this.getStatisticTerFeedList()
    this.initMap()
    this.$nextTick(() => {
      this.initLineChart()
    })
  },
  methods: {
    // 区域遮盖 - 行政区划设置
    init1(c) {
      let city = c;
      var that = this;
      if (that.polygon) {
        that.map.remove(that.polygon);
      }
      AMap.plugin("AMap.DistrictSearch", function () {
        new AMap.DistrictSearch({
          extensions: "all",
          subdistrict: 1,
        }).search(city, function (status, result) {
          // 外多边形坐标数组和内多边形坐标数组
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
          ];
          if (result.districtList) {
            var holes = result.districtList[0].boundaries;
            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: "#0081FF ", //城市边界颜色
              strokeWeight: 4,
              fillColor: "#005DFF", // 遮罩背景色黑色
              fillOpacity: 0,
            });
          }

          that.polygon.setPath(pathArray);
          that.map.add(that.polygon);
        });
      });
    },
    init3(city) {//区域遮盖
      var that = this
      AMap.plugin('AMap.DistrictSearch', function () {
        new AMap.DistrictSearch({
          extensions: "all",
          level: 'district',
          subdistrict: 1
        }).search(city, function (status, result) {// 外多边形坐标数组和内多边形坐标数组
          if (result.districtList) {
            var holes = result.districtList[0].boundaries
            var pathArray = []
            pathArray.push.apply(pathArray, holes)
            that.polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: "#0081FF", //城市边界颜色
              strokeWeight: 3,
              fillColor: "#005DFF", // 遮罩背景色黑色
              fillOpacity: 0.15,
            })
          }
          //鼠标高亮效果
          // that.polygon.on('mouseover', function () {
          //   // console.log('mouseover',city,e)
          //   that.WordsFollowMouseDOM(city)
          // });
          // that.polygon.on('mouseout', function () {
          //   // console.log('mouseout',city,e)
          //   that.WordsFollowMouseDOM2(city)
          //   // that.WordsFollowMouseDOM('')
          // });
          that.polygon.setPath(pathArray)
          that.map.add(that.polygon)
        })
      })
    },
    // 获取村庄点位
    getVillagePoint() {
      const areaId = this.queryParam.areaId
      getVillagePoint({ areaId }).then(res => {
        console.log(res, 'res---获取村庄点位')
        this.villageList = res.data
        this.drawMarkerLayer()
      })
    },
    drawMarkerLayer() {
      let markers = []
      this.villageList.forEach((item) => {
        let icon = item.type === 1 ? "villageNachangIcon" : (item.policeStatus === 2 || item.status === 2) ? "villageBreakIcon" : "villageIcon";
        let iconUrl = require(`@/assets/qrStatistic/${icon}.png`);
        let marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          extData: {
            item,
          },
          cursor: "pointer",
          // icon: new AMap.Icon({
          //   image: iconUrl,
          //   size:[22, 28], //图标大小
          //   imageSize:[22, 28],
          // }),
          content: `<div class="custom-content"><div class="custom-label">${item.areaName}</div><br><img class="icon-label" src="${iconUrl}"/></div>`,
          icon: {
            image: iconUrl,
            size: [22, 28], //图标大小
          },
          text: {
            direction: 'top',
            style: {
              backgroundColor: '#3C8AFF',
              fillColor: '#fff'
            }
          },
          offset: new AMap.Pixel(-16, -37),  //左右，上下
          zIndex: 100,
        });
        // marker.setLabel({
        //   // offset:new AMap.Pixel(0, -10), //设置文本标注偏移量
        //   content: item.areaName, //设置文本标注内容
        //   direction: "top", //设置文本标注方位
        // });
        // marker.on("click", (e) => {
        //   // let arr=["1638530804829163521","1638530805038878721","1638530806930509825",
        //   //   "1638530835665686530","1948261570562826242"];
        //   const villageInfo = e.target.getExtData().item;
        //   getAreasParInfo({areaId:villageInfo.areaId}).then(({data})=>{
        //     let arr=data.result.reverse()
        //     let arr2=arr.splice(0, 2)
        //     console.log(arr2,'7.288888888888888')
        //     if(villageInfo.equNum) this.$parent.areaChange(arr)
        //   })
        //   console.log("villageInfo", villageInfo);
        // });
        markers.push(marker);
      });
      console.log(this.map, 'this.map')
      this.map.add(markers);
    },
    areaChange(e) {
      // const name = getNodePath({ id: e }, this.dataTree)
      console.log(e, 'e')

      this.queryParam.areaId = e
      this.getStatisticData()
      this.getAreaTerList()
      this.dateTypeChange({ target: { value: 'a' } })
      this.getStatisticTerFeedList()
      this.getVillagePoint()
      this.initMap()
      this.initLineChart()
    },
    pageChange(val) {
      console.log(val, '分页改变')
      this.ipagination.current = val.current
      this.ipagination.pageSize = val.pageSize
      this.getStatisticTerFeedList()
    },
    deleteFeed(id) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确认删除 ?',
        onOk() {
          deleteFeed({ id }).then(res => {
            console.log(res, 'res--删除')
            if (res.code === 200) {
              that.getStatisticTerFeedList()
              that.$message.success('删除成功')
            }
          })
        },
        onCancel() { }
      })
    },
    checkFeedDetail(ids) {
      console.log(ids, 'idssssssss')
      if (ids.length) {
        this.$refs.feedDetailExport.ids = ids.map(item => { return { id: item, checked: true } })
        this.$refs.feedDetailExport.visible = true
        // this.$refs.feedDetailExport.ids = [{id: 1, checked: true}, {id: 2, checked: true}]
      } else {
        this.$message.warning('至少选择一条数据！')
        return
      }
    },
    // 导出数据
    exportFeedList() {
    },
    // 获取字典枚举
    async getDictListFun() {
      const params = {
        dictId: '1939508633497870338',
        pageNo: 1,
        pageSize: 10
      }
      await getDictItemList(params).then(async res => {
        console.log(res, 'res反馈类型')
        this.feedTypeList = res.result.records
      })
    },
    searchQuery() {
      this.ipagination.current = 1
      this.getStatisticTerFeedList()
    },
    customerSearchReset() {
      this.queryParam = {}
      this.queryParam.areaId = this.userInfo.departIds

      this.getStatisticTerFeedList()
    },
    dateQueryChange(e) {
      const date = [moment(e[0]).format('YYYY-MM-DD'), moment(e[1]).format('YYYY-MM-DD')]
      this.queryParam.startDate = date[0]
      this.queryParam.endDate = date[1]
    },
    // 扫码反馈列表
    getStatisticTerFeedList() {

      console.log(this.queryParam, '分页列表')
      this.queryParam.pageNo = this.ipagination.current
      this.queryParam.pageSize = this.ipagination.pageSize
      getStatisticTerFeedList(this.queryParam).then(res => {
        this.tableData1 = res.data.records
        this.ipagination.total = res.data.total
      })
    },
    dateTypeChange(e) {
      console.log(e, '日期类型选择')
      let date = []
      if (e.target) { // 预设类型
        if (e.target.value === 'a') { // 当天
          date = getTimeWeekMouth('当天')
        } else if (e.target.value === 'b') { // 本周
          date = getTimeWeekMouth('本周')
        } else if (e.target.value === 'c') { // 本月
          date = getTimeWeekMouth('当月')
        }
      } else { // 自定义日期
        date = [moment(e[0]).format('YYYY-MM-DD') + ' 00:00:00', moment(e[1]).format('YYYY-MM-DD') + ' 23:59:59']
      }
      console.log(date, 'date')
      this.getStatisticTerFeedTend(date)
    },
    radioChange(e) {
      console.log(e, 'val')
      const terminalId = e.target.value
      this.getStatisticTerFeedRank(terminalId)
    },
    // 扫码反馈趋势
    getStatisticTerFeedTend(date) {
      const [startDate = '', endDate = ''] = date
      const areaId = this.queryParam.areaId
      getStatisticTerFeedTend({ areaId, startDate, endDate }).then(res => {
        console.log(res, 'res--扫码反馈趋势')
        this.option.xAxis.data = res.data.map(item => item.date)
        this.option.series[0].data = res.data.map(item => item.total)
        this.initLineChart()
      })
    },

    // 反馈类型排行
    getStatisticTerFeedRank(terminalId) {
      getStatisticTerFeedRank({ terminalId }).then(res => {
        this.tableData = res.data
      })
    },
    // 获取终端列表
    getAreaTerList() {
      const areaId = this.queryParam.areaId
      getAreaTerList({ areaId, pageNo: 1, pageSize: 10 }).then(res => {
        this.terminalList = res.data.records
        if (this.terminalList.length) {
          this.terminalIdCheck = this.terminalList[0].terminalId
          this.getStatisticTerFeedRank(this.terminalList[0].terminalId)
        }
      })
    },

    // 获取统计数据总览
    getStatisticData() {
      const areaId = this.queryParam.areaId
      console.log(areaId, 'areaId')
      getStatisticData({ areaId }).then(res => {
        console.log(res, 'res')
        this.formData = res.data
      })
    },
    // 初始化折线图
    initLineChart() {
      let myChart = echarts.init(this.$refs.feedTendChart)
      myChart.setOption(this.option)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化地图
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "ecb9d215b9a5feeac1ea044eeb9198f4",
      };
      var _this = this
      AMapLoader.load({
        key: '7bf1afe0a111e75bc96b5f5d0553b5f3', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['MapType', 'AMap.DistrictSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: '1.1', // AMapUI 缺省 1.1
          plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
        }
      })
        .then(AMap => {
          _this.map = new AMap.Map('mapContent', {
            //设置地图容器id
            // resizeEnable: true,
            viewMode: '3D', //是否为3D地图模式
            zoom: 9, //设置地图的缩放级别
            center: _this.centerPosition, //初始化地图中心点位置
            mapStyle: 'amap://styles/3efe3caae4d86d89083fd8e4e911a826' //'amap://styles/macaron' // 设置地图的显示样式
          })
          _this.map.on('complete', () => {
            this.$nextTick(() => {
              this.init1('金华市');
            })
            let jhName = ['婺城区', '浦江县', '磐安县', '金东区', '永康市', '武义县', '义乌市', '兰溪市', '东阳市']
            jhName.forEach(item => {
              // this.$nextTick(() => {
              setTimeout(() => {
                this.init3(item);
              }, 700)
              // })
            })
            //   _this.initArea(AMap)
            _this.getVillagePoint()
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
  }
}
</script>
<style>
@import '~@assets/less/common.less';
.custom-content {
  text-align: center;
  width: 120px;
}
.custom-label {
  padding: 2px 18px;
  border-radius: 50px;
  background: #3c8aff;
  color: #fff;
  /* width: 100% */
  display: unset;
  margin-bottom: 4px;
}
.icon-label {
  width: 22px;
  height: 28px;
}
</style>
<style lang="less" scoped>
// ::v-deep .ant-select-selection__placeholder{
//   display: block !important;
// }
.select-top {
  display: flex;
  // align-items: center;
  // height: 30px;
  .breadCrumb {
    font-family: PingFang SC;
    font-weight: bold;
    color: #989898;
    line-height: 30px;
    display: inline-block;
    font-size: 12px;
    .icon {
      font-size: 9px;
    }
    .last {
      vertical-align: middle;
      font-size: 12px;
    }
    .now {
      font-size: 12px;
      vertical-align: middle;
      color: #4a4a4a;
    }
  }
  .selectBg {
    width: 103px;
    height: 30px;
    color: #fff;
    background: url('../../assets/statistic/selectBg.png') no-repeat 100% 100%;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    line-height: 30px;
    text-align: center;
    margin-left: 56px;
    margin-bottom: 8px;
  }
}
.topContent {
  margin-top: 8px !important;
  :nth-child(1) {
    .ter_card {
      border: 0;
    }
  }
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 16px;
    color: #4a4a4a;
  }
  .rankTable {
    height: 302px;
    ::v-deep .ant-table-tbody > :first-child {
      background: linear-gradient(90deg, #faead2 0%, #ffffff 100%);
    }
    ::v-deep .ant-table-tbody > :nth-child(2) {
      background: linear-gradient(90deg, #d5e7fe 0%, #ffffff 100%);
    }
    ::v-deep .ant-table-tbody > :last-child {
      background: linear-gradient(90deg, #f1f1f1 0%, #ffffff 100%);
    }
    ::v-deep .ant-table-tbody > :nth-child(3) {
      background: linear-gradient(90deg, #e7e9f6 0%, #ffffff 100%);
    }
    ::v-deep .ant-table-tbody > tr > td {
      font-size: 12px;
      color: #4a4a4a;
      border: 0;
      line-height: 0px !important;
      padding-top: 8px;
      padding-bottom: 7px;
    }
    ::v-deep .ant-table-thead > tr > th {
      padding-left: 0;
      padding-right: 0;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #8e8e8e;
      line-height: 0px;
      background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
      border: 0;
    }
  }
  .mapContent {
    width: 100%;
    height: 582px;
    background: #e3e3e3;
    margin-top: 28px;
  }
  .feedTendChart {
    width: 100%;
    height: 238px;
  }
  .radioClass {
    ::v-deep .ant-radio-group-small .ant-radio-button-wrapper {
      padding: 0 13px;
      border-radius: 50px !important;
    }
    ::v-deep .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
      background: #f4f6f8;
      color: #2769f7;
    }
    ::v-deep .ant-radio-button-wrapper {
      border: 0;
    }
    ::v-deep .ant-radio-button-wrapper:not(:first-child)::before {
      width: 0;
    }
  }
}
.ter_card {
  border-left: 2px solid #f4f6f8;
  display: inline-block;
  width: 100%;
  height: 77px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  justify-content: space-around;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 12px;
    color: #8e8e8e;
    .value {
      font-weight: 800;
      font-size: 20px;
      color: #4a4a4a;
    }
  }
  .runingIcon {
    width: 63px;
    height: 63px;
    margin-left: 24px;
  }
  .pieChartClass {
    width: 78px;
    height: 96px;
  }
  .toolItem {
    .label {
      font-weight: bold;
      font-size: 14px;
      color: #4a4a4a;
      .point {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 6px;
      }
    }
    .value {
      font-weight: 800;
      font-size: 26px;
      color: #4a4a4a;
      line-height: 37px;
      margin-left: 15px;
    }
  }
}
.statusTag {
  padding: 3px 12px;
  color: #fff;
  display: inline-block;
  white-space: nowrap;
}
.process {
  background: #bfbfbf;
}
.processed {
  background: #6c9afe;
}
.overtime {
  background: #f6e67a;
}
</style>